<template>
  <div class="mes-manage">
    <el-dialog
      :close-on-click-modal="false"
      title="MES接口管理"
      custom-class="mes-dialog us-none"
      :visible.sync="MesVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <el-button
          @click="showAddMesDialogBtn"
          color="#545c64"
          style="color: #545c64;margin-bottom: 20px"
          round
          size="mini"
        >
          添加 <i class="el-icon-circle-plus"/></el-button>
      </div>
      <el-card>
        <div slot="header" class="box-card-header">
          <h5>
            已添加的设备
          </h5>
        </div>
        <div class="yet-mes-list">
          <template v-if="mess.length>0">
            <div
              v-for="(item, index) in Mess"
              :key="item"
              class="yet-mes-item cursor-cp"
            >
              <h2 @click="seletedMes(item,index)">
                <svg-icon :size="50" :icon-class="item.MesType" style="margin-right: 10px;transform: rotate(40deg)"/>
                {{ item.MesName }}
              </h2>
            </div>
          </template>
          <div
            v-else
            style="display: flex;justify-items: center;justify-content: center;width: 100%;flex-direction: column;align-items: center"
          >
            <svg-icon :size="222" icon-class="energy" style="color: #c8c8c8"/>
            <label style="color: #c8c8c8">设备都去哪啦</label>
          </div>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>

import SysMesApi from '@/api/SysMesApi'

export default {
  name: 'Mes',
  components: {
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show(v) {
      if (v) {
        this.MesVisible = v
        this.initMes()
      }
    }
  },
  data() {
    return {
      Mess: [],
      ShowAddMesDialog: false,
      ShowEditMesDialog: false,
      MesVisible: false,
      CurrentMesIndex: null,
      AddMesTemp: null
    }
  },
  methods: {
    initMes() {
      new SysMesApi().GetMeslist((list) => {
        this.mess = list
      })
    },
    seletedMes(item, index) {
      this.onSelectMes(item)
      this.CurrentMesIndex = index
    },
    showAddMesDialogBtn() {
      this.ShowAddMesDialog = true
    },
    OnCloseAddMesDialog() {
      this.ShowAddMesDialog = false
    },
    OnCloseEditMesDialog() {
      this.ShowEditMesDialog = false
    },
    /**
     * 刷新数据
     * @constructor
     */
    OnRefresh() {
      this.initMes()
    },
    onSelectMes(mes) {
      this.AddMesTemp = mes
      this.ShowEditMesDialog = true
    },
    onDeleteMes() {
      this.OnCloseEditMesDialog()
      if (this.CurrentMesIndex != null) {
        this.mess.splice(this.CurrentMesIndex, 1)
      }
    },
    handleClose(done) {
      this.MesVisible = false
      this.$emit('close')
    }
  }
}
</script>
<style lang="less">
.mes-dialog {
  .el-dialog__header {
    background-color: #545c64;
    padding: 20px 10px;

    .el-dialog__title {
      color: #ffffff;
    }
  }

  .el-card__header {
    padding: 0 20px;
  }

  .yet-mes-list {
    display: flex;
    flex-wrap: wrap;
    user-select: none;
    overflow-y: scroll;
    height: calc(100vh - 500px);

    .yet-mes-item {
      cursor: pointer;
      padding: 20px;
      margin: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      height: 130px;

      h2 {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
